<template>
	<view class="balance">
		<view class="balance_b">
			<view class="flex">
				<view class="">
					<view class="b_text">
						当前积分
					</view>
					<view class="b_y">
						￥{{points.points}}
					</view>
				</view>
				<view class="b_image">
					<image src="../../static/34.png" alt="">
				</view>
			</view>
			<view class="f_box flex" >
				<view class="f_1">
					<view class="">
						累计获得
					</view>
					<view class="">
						{{points.total_points}}
					</view>
				</view>
				<view class="line"></view>
				<view class="f_1">
					<view class="">
						累计使用
					</view>
					<view class="">
						{{points.use_points}}
					</view>
				</view>
				<!-- <view class="line"></view>
				<view class="f_1">
					<view class="">
						累计获得
					</view>
					<view class="">
						1000
					</view>
				</view> -->
			</view>
			<view class="f_box1 flex" @click="log">
				<view class="f_title">
					近30天记录
				</view>
				<view class="more">
					更多<image :src="right" alt="" />
				</view>
			</view>
		</view>
		<view class="b_p">
			<view class="s-list flex" v-for="(item,index) in  points.data" :key="index">
				<view class="">
					<view class="s_title">
						{{item.describe}}
					</view>
					<view class="s_date">
						{{item.create_time}}
					</view>
				</view>
				<view class="s_balance" :class="[item.value > 0 ? 's_balance' : 's_balance_f']">
					{{ item.value > 0 ? '+' : '' }}{{ item.value }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/recovery'
	export default {
		data() {
			return {
				key: 0,
				right:'../../static/right.png',
				points:{}
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			change(n) {
				this.key = n
			},
			log(){
				this.$navTo('pages/points/log')
			},
			getList(){
				const app = this
				return new Promise((resolve, reject) => {
				  Api.getPoints()
				    .then(result => {
				      app.points = result.data.list
					  console.log(app.points)
				      resolve(app.points)
				    })
				})
				
			}
		}
	}
</script>

<style scoped>
	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.balance_b {
		width: 100%;
		height: 334rpx;
		padding: 70rpx 33rpx;

		background: linear-gradient(0deg, #66B347 0%, #66B347 100%);
	}

	.b_text {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.b_y {
		font-size: 60rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFFFFF;
	}

	.b_image {
		width: 116rpx;
		height: 129rpx;

	}

	.b_image image {
		width: 100%;
		height: 100%;
	}

	.f_box {
		width: 685rpx;
		/* height: 177rpx; */
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 30rpx;
		padding: 50rpx 50rpx;
	}

	.line {
		width: 2rpx;
		height: 57rpx;
		background: #CCCCCC;
	}

	.f_1 {
		text-align: center;
	}

	.f_box1 {
		width: 685rpx;
		margin: 30rpx 0;
	}

	.f_title {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.more image {
		width: 12rpx;
		height: 21rpx;
		margin-left: 10rpx;
	}
	
	.b_p{
		padding: 40rpx 34rpx;
		background-color: #FFFFFF;
		margin-top: 192rpx;
	}
	.s_title{
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-bottom: 28rpx;
	}
	.s_balance {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FFB823;
	}
	.s_balance_f {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #66B347;
	}
	.s-list{
		margin-bottom: 40rpx;
	}
	.s_date{
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}
</style>
